import React,{useState,useContext} from 'react'
import Header from '../../components/Header/Header'
import { reqlogin } from '../../http/api'
import { Button, Form, Input, Toast } from "antd-mobile"

import {MyContext} from "../../App"
import {actions} from "../../reducer/app"

const Login = (props) => {
  // 1.初始化表单数据
   const [user,setUser]=useState({
     phone:"",
     password:""
   })
  
   const {dispatch}=useContext(MyContext)

  //  登陆
  const doLogin=()=>{
    reqlogin(user).then(res=>{
      if(res.data.code==200){
        // 弹窗
        Toast.show({ content: res.data.msg })
        // 存用户数据
        dispatch(actions.changeUserInfo(res.data.list))
        // 跳转
        props.history.push("/index/home")
      }
    })
  }
  return (
    <div>
        <div>user:{JSON.stringify(user)}</div>
        <Header register title="登陆"></Header>

        <Form layout='horizontal'>
          <Form.Item label='账号' name='phone'>
            <Input placeholder='请输入账号' clearable value={user.phone} onChange={(e)=>setUser({...user,phone:e})}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable value={user.password} onChange={(e)=>setUser({...user,password:e})}/>
          </Form.Item>
        </Form>
        <Button block shape='rounded' color='primary' onClick={()=>doLogin()}>
          登陆
        </Button>

    </div>
  )
}

export default Login